<template>
  <div class="demo-split">
    <Split v-model="split2" mode="vertical">
      <div slot="top" class="demo-split-pane" style="margin: 20px">
        <Button type="primary" icon="ios-search" @click="search()">查询</Button>
        <div style="float:left;bottom:10px;position:absolute;">
          <Button type="success" @click="modal=true">新增</Button>
          <Modal title="车辆类型新增"
                 v-model="modal"
                 :mask-closable="false" >
            <Form :model="formItem" >
              <FormItem>
                <Input v-model="formItem.name">
                  <span slot="prepend">车辆类型名称</span>
                </Input>

              </FormItem>
              <FormItem style="text-align: center">
                <Button type="primary" @click="save()">保存</Button>
                <Button style="margin-left: 8px" @click="reset()">重置</Button>
              </FormItem>
            </Form>
          </Modal>
        </div>
      </div>

      <div slot="bottom" class="demo-split-pane">

        <Table border :columns="table" :data="getData"></Table>

        <Modal title="编辑"
               v-model="modalUp"
               :mask-closable="false" >
          <Form v-model="formItemUp" >
            <FormItem>
              <Input v-model="formItemUp.name">
                <span slot="prepend">车辆类型名称</span>
              </Input>

            </FormItem>
            <FormItem style="text-align: center">
              <Button type="primary" @click="update(formItemUp)">保存</Button>
              <Button style="margin-left: 8px" @click="resetUp()">重置</Button>
            </FormItem>
          </Form>
        </Modal>
      </div>
    </Split>
  </div>
</template>

<script>
  export default {
    name: "CarType",
    data() {
      return {
        formItem: {
          name: ''
        },
        formItemUp: {
          name: '',
          carType:''
        },
        modal: false,
        modalUp: false,
        split2: 0.4,
        data: [],
        table: [
          {title: '编号', key: 'carType'},
          {
            title: '车辆类型', key: 'name'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.formItemUp.name = params.row.name;
                      this.formItemUp.carType = params.row.carType;
                      this.modalUp = true;
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.del(params.row.carType)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ]
      }
    },
    computed: {
      getData() {
        return this.data;
      },
      addData() {
        return this.formItem
      },
      getModal(){
        return this.modal;
      },
      getModalUp(){
        return this.modalUp;
      }
    },
    methods: {
      reset() {
        this.formItem = []
      },
      search() {
        this.$axios.get(this.$rootPath + "carType/findAll").then(response => {
          this.data = response.data.data;
        });
      },
      save() {
        this.$axios({
          url: this.$rootPath + "carType/save",
          method: 'post',
          data:{
            name: this.addData.name
          }
        })
        .then(response=>{
          this.data = response.data.data.data;
        })
        this.modal=false
      },
      update(params) {
        this.$axios({
          url: this.$rootPath + "carType/update",
          method: 'post',
          data:params
        })
          .then(response=>{
            this.data = response.data.data.data;
          })
        this.modalUp=false
      },
      del(params) {
        this.$axios({
          url: this.$rootPath + "carType/del",
          method: 'post',
          data:{
            carType:params
          }
        })
          .then(response=>{
            this.data = response.data.data.data;
          })

      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传.xls,.xlsx文件。'
        })
      },
      handleSuccess(res, file) {
        if (res.errcode === 0) {
          this.dialoLead = false
          this.$Message.success("数据导入成功！")
          this._getBookList()
          this.$refs.upload.clearFiles()
        }
      },
      handleError(error, file) {
        this.$Message.error("数据导入失败！")
      },
    }
  }
</script>

<style scoped>
  @import "../../assets/split.css";
</style>
